<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import SearchSelect from './SearchSelect.vue';
import { Plus } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';


const defaultForm = {date:'',name:'',address:'',cover_img:'',content:''}
const ruleForm = ref({ ...defaultForm })
// 抽屉
const drawer = ref(false)
const cancelClick = () => {
  drawer.value = false
}

// 富文本，作用为了清空富文本
const qedit = ref()
// 本地预览图片
const imageUrl = ref('')
const upImage = (image) => {
    console.log(image.raw)
    // 本地预览
    imageUrl.value = URL.createObjectURL(image.raw)
    // 添加到要提交的数据里
    ruleForm.value.cover_img = image.raw
}


// 父组件打开抽屉
const open = (row) => {
    drawer.value = true
    console.log(row)
    if(row){
        console.log("编辑")
        // 回显数据
        ruleForm.value = {...row}
        // 回显图片
        imageUrl.value = ruleForm.value.cover_img
        
    }else{
        console.log("新建")
        // 置空
        ruleForm.value = { ...defaultForm }
        imageUrl.value = ''
        qedit.value.setHTML('')
    }   
}
defineExpose({
    open
})

// 子组件触发提交
const emit = defineEmits(['tijiao'])
const confirmClick = () => {
  ElMessageBox.confirm(`Are you confirm ?`)
    .then(() => {
      drawer.value = false
      // 把图片做成对象的形式
      const fd = new FormData()
      for (const key in ruleForm.value) {
            console.log(`key:${key},${ruleForm.value[key]}`)
            fd.append(key, ruleForm.value[key])
          }
      // artAddChannelService(fd) 可以在子组件提交
      // 交给父组件提交
      emit('tijiao',fd)
      
    })
    .catch(() => {
      // catch error
    })
}
// 富文本：https://vueup.github.io/vue-quill/
</script>
<template>
    <div>
        <el-drawer
            v-model="drawer"
            :title="ruleForm.name ? '编辑' : '新增' "
            direction="rtl"
            size=40%
        >
            <el-form label-width="auto" label-position="right"	:model="ruleForm">
                <!-- <el-form-item label="name" prop="name">
                        <search-select v-model="articleId" width="100%" ></search-select>
                </el-form-item> -->
                <!-- 图片 -->
                <el-form-item label="cover_img" prop="cover_img">
                    <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="upImage"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <!-- 富文本 -->
                <el-form-item label="content">
                    <div class="editor">
                    <quill-editor ref="qedit" theme="snow" v-model:content="ruleForm.content" content-type="html">
                    </quill-editor>
                    </div>
                </el-form-item>
                <el-form-item label="name" prop="name" >
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="date" prop="date" >
                    <el-input v-model="ruleForm.date" />
                </el-form-item>
                <el-form-item label="address" prop="address" >
                    <el-input v-model="ruleForm.address" />
                </el-form-item>
            </el-form>
            <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">cancel</el-button>
                <el-button type="primary" @click="confirmClick">confirm</el-button>
            </div>
            </template>
        </el-drawer>
    </div>
</template>
<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>